<template>
    <div>
        <div class="module_202" v-for="(item,index) in imgList" :key="index"  style="padding-bottom: 0px; background: rgb(243, 244, 245);">
              <a class="db1 overflow" >
                  <img :src="item.img_url" class="db1" style="height: 100%;">
                  
              </a>
          </div>
        <div class="mould_253" style="padding-bottom: 9.97333px; background: rgb(247, 247, 247);">
            <div class="pad10 w100">
                <div class="roundStyle bgfff pt10 pb10 pl5 pr5">
                    <p class="c333 ft18 mb5 pl5">
                        <span class="bold">心选特惠</span>
                        <span class="ft12 ccc ml5">严选好物低价啦！</span>
                    </p>
                    <div class="flex" >
                        <a class="it1 mr5 ml5" v-for="(item,index) in dataList" :key="index">
                            <div class="goods-round pad5 rela">
                                <img :src="item.goods_img" width="100%">
                                <div class="abs tipico cfff ft10"></div>
                            </div>
                            <div class="c333 ft12">
                                <p class="mt5 ell">{{item.title}}</p>
                                <div class="flex">
                                    <div class="ft14 bold mr5">￥{{item.sale_price}}</div>
                                    <div class="ft10 ccc through mt3">￥{{item.market_price}}</div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="mould_256" style="padding-bottom: 9.97333px; background: rgb(247, 247, 247);">
            <div class="pad10 w100">
                <div class="roundStyle bgfff pt10 pb10 pl5 pr5">
                    <p class="c333 ft18 mb5 pl5">
                        <span class="bold">养宠风尚 拒绝平庸</span>
                    </p>
                    <a class="roundStyle mt10 bgf7 flex" v-for="(item,index) in itemList" :key="index">
                        <img :src="item.goods_img" width="55%" class="round10">
                        <div class="pad10">
                            <p class="ft13 c333 el2 mb5">{{item.title}}</p>
                            <div class="flex">
                                <img :src="item.img_src" width="50" class="round5">
                                <div class="ml10 mt10">
                                    <p class="ft14 bold">￥{{item.sale_price}}</p>
                                    <p class="ft10 c999 ell">{{item.be_interested}}</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="mould_257" style="padding-bottom: 10px; background: rgb(247, 247, 247);">
            <div class="pad10 w100 ideaBanner">
                <div class="roundStyle bgfff pt10 pb10 pl10 pr10">
                    <p class="c333 ft18 mb10 pl5">
                        <span class="bold">锦囊喵计</span>
                        <span class="ft12 ccc ml5">爱宠十年 小有心得</span>
                    </p>
                    <div >
                        <van-swipe  class="my-swipe"  :show-indicators="false">
                        <van-swipe-item v-for="(item,index) in themList" :key="index">
                            <div>
                                <div class="clearfix">
                                    <a class="db">
                                        <img :src="item.cover.img_url" class="round5 db w100">
                                        <p class="ft14 mt3 pt5 lhcut rela">{{item.topic_name}}</p>
                                        <p class="ft12 c999" style="line-height:20px">{{item.recommend}}</p>
                                    </a>
                                </div>
                                
                            </div>
                            
                        </van-swipe-item>
                        

</van-swipe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import data from '@/assets/static/data.js'
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    data(){
        return{
            data,
            dataList:[],
            itemList:[],
            imgList:[],
            themList:[]
        }
    
    },
        
    mounted(){
        this.dataList=data.datas.list.find((v)=>v.index==7158).data.list
        this.itemList=data.datas.list.find((v)=>v.index==7161).data.list
        this.imgList=data.datas.list.find((v)=>v.index==7171).data.images
        this.themList=data.datas.list.find((v)=>v.index==7162).data.lists
        // console.log(data.datas.list.find((v)=>v.index==7158).data.list);
    }
    // async mounted(){
    //     let result=await this.$http.get({
    //         url:'/data.json'
    //     })
    //     console.log(result);
    // }
}
</script>
<style lang="stylus" scoped>
.db1
  display: block;
  width 100%
.pad10 {
    padding: 0.1rem;
}
.w100 {
    width: 100%;
}
.roundStyle {
    border-radius: 0.1rem 0.3rem 0.1rem 0.1rem;
}
.bgfff {
    background: #fff;
}
.pl5 {
    padding-left: 0.05rem;
}
.pb10 {
    padding-bottom: 0.1rem;
}
.pr5 {
    padding-right: 0.05rem;
}
.pt10 {
    padding-top: 0.1rem;
}
.c333 {
    color: #333;
}
.ft18 {
    font-size: 0.18rem;
}
.pl5 {
    padding-left: 0.05rem;
}
.mb5 {
    margin-bottom: 0.05rem;
}
.bold {
    font-weight: 700;
}
.ccc {
    color: #ccc;
    vertical-align: -0.02rem;
}
.ft12 {
    font-size: 0.12rem;
}
.ml5 {
    margin-left: 0.05rem;
}
.flex
    display flex

.it1 {
    -webkit-box-flex: 1;
    display: block;
    min-width: 0;
    flex: 1;
}
.ml5 {
    margin-left: 0.05rem;
}
.mr5 {
    margin-right: 0.05rem;
}
.goods-round {
    border-radius: 0.1rem 0.1rem 0.1rem 0px;
    border: solid #eee 0.01rem;
}
.rela, .relative {
    position: relative;
}
.pad5 {
    padding: 0.05rem;
}
.tipico {
    border-radius: 0.1rem 0 0.1rem 0;
    padding: 0px 0.12rem;
    bottom: -0.02rem;
    left: 0;
    line-height: 0.18rem;
}
.afff, .cfff {
    color: #fff;
}
.abs {
    position: absolute;
}
.el2, .ell {
    overflow: hidden;
}
.ell {
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mt5 {
    margin-top: 0.05rem;
}
.ft14 {
    font-size: 0.14rem;
}
.mr5 {
    margin-right: 0.05rem;
}
.through {
    text-decoration: line-through;
}
.mt3 {
    margin-top: 0.03rem;
}
.pad10 {
    padding: 0.1rem;
}
.bgf7 {
    background: #f7f7f7;
}
.mt10 {
    margin-top: 0.1rem;
}
.round10 {
    border-radius: 0.1rem;
}
.el2 {
    height: 0.32rem;
    font-size: 0.14rem;
    line-height: 0.16rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.el2, .ell {
    overflow: hidden;
}
.mb5 {
    margin-bottom: 0.05rem;
}
.round5 {
    border-radius: 0.05rem;
}
.ml10 {
    margin-left: 0.1rem;
}
.mt10 {
    margin-top: 0.1rem;
}
.c999 {
    color: #999;
}
.ft10 
    font-size: 0.12rem;
    -webkit-transform-origin-x: 0;
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 0.2rem;
    line-height: 1.5rem;
    text-align: center;
    
  }
.db {
    display: block;
}
.lhcut {
    line-height: 0.16rem;
}
</style>